<template>
    <el-dialog :visible="visible" :title="title" @close="close" width="56%" :close-on-click-modal="false">
	<el-form ref="form" :model="cmd" label-position="top">
      <el-col :span="24">
        <el-col :span="11">
            <el-form-item
              label="命令名称"
              prop="name"
              :rules="[{ required: true, message: '请输入命令名称', trigger: 'blur' }]"
            >
              <el-input v-model="cmd.name" placeholder="请输入命令名称" clearable />
            </el-form-item>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="11">
          <el-form-item
            label="命令标识符"
            prop="identifier"
            :rules="[{ required: true, message: '请输入命令标识符', trigger: 'blur' },{ validator: validatePass, trigger: 'blur' }]"
          >
            <el-input v-model="cmd.identifier" placeholder="请输入命令标识符" clearable />
          </el-form-item>
        </el-col>
      </el-col>


      <el-col :span="24">
        <el-col :span="11">
          <el-form-item
              label="cmdId"
              prop="cmdId"
            >
              <el-input-number v-model="cmd.cmdId" :min="1" :max="100" label="请输入cmdId" :disabled="operation==='update'"></el-input-number>
            </el-form-item>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="11">
            <el-form-item
              label="命令类型"
              prop="type"
              :rules="[{ required: true, message: '请选择命令类型', trigger: 'blur' }]"
            >
              <el-select v-model="cmd.type" placeholder="请选择命令类型" clearable style="width: 100%;">
               <el-option label="上报帧" :value="0" />
                <el-option label="下发帧" :value="1" />
              </el-select>
            </el-form-item>
        </el-col>
      </el-col>
	<!-- Connected lists -->
		<div class="row">
			<div class="col-3">
			<h3>待选参数</h3>
			<draggable class="list-group" :list="listin" group="people" @change="log">
				<div
				class="list-group-item"
				v-for="(element) in listin"
				:key="element.id"
				>
				{{ element.identifier }}
				</div>
				<div class="clear"></div>
			</draggable>
			</div>
			<div class="col-3">
			<h3>已选参数</h3>
			<draggable class="list-group" :list="listout"  group="people" draggable=".list-group-item" @start="dragging = true" @end="dragging = false" @change="log">
				<div
				class="list-group-item"
				v-for="(element) in listout"
				:key="element.id"
				>
				{{ element.identifier }}
				</div>
				<div slot="header" class="btn-group" role="group" v-show="visibleHeader">
					请拖拽到此处
				</div>
			    <div class="clear"></div>
			</draggable>
			</div>
			<div class="clear"></div>
		</div>
    <el-col :span="24">
            <el-form-item
              label="描述"
              prop="descp"
            >
              <el-input v-model="cmd.descp" placeholder="请输入命令描述" clearable />
            </el-form-item>
      </el-col>
    </el-form>
    <span slot="footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
    </el-dialog>
</template>
<script>
import draggable from "@/tools/vuedraggable";
import { productService } from '@/services';
export default {
  name: "cmdEdit",
  props: {
	operation: {
      default: 'add',
      validator: (value) => {
        return ['add', 'update'].indexOf(value) !== -1;
      },
    },
    visible: {
      type: Boolean,
      required: true,
    },
	cmd: {
	  type: Object,
	  required: true,
	},
	listin: {
      type: Array,
	  required: true,
	},
	listout: {
	  type: Array,
      required: true,
	},
	visibleHeader: {
	  type: Boolean,
	  required: true,
	}
  },
  components: {
    draggable
  },
    data() {
        var validatePass = (rule, value, callback) => {
            const reg =/^[_a-zA-Z0-9]+$/;
            if(value==''||value==undefined||value==null){
                callback();
            } else {
                if (!reg.test(value)){
                callback(new Error('仅由英文字母，数字以及下划线组成'));
                } else {
                callback();
                }
            }
            }

        return {
             validatePass: validatePass,
             draggable: false
        };
    },
  computed: {
    title() {
		if(this.operation==='add'){
			return '新增命令';
		} else {
			return '编辑命令';
		}
	},
  },
  methods: {
    close() {
      this.$emit('update:visible', false);
    },
	async confirm() {
      try {
        await this.$refs.form.validate();

        if(this.listout.length<=0){
          this.$message.error({"message":'参数内容不能为空'});
          return;
        }

        var array = [];

        this.listout.forEach (item => {
          array.push(item.id);
        });
        var content = array.sort().join(",");
        var cmdout = Object.assign({},this.cmd);
        cmdout.content = content;
        cmdout.operation = this.operation;
        await productService.editCmd(cmdout);
        if(this.operation==='add')
        this.$message.success({'message':'新增成功'});
        else
        this.$message.success({'message':'修改成功'});
        this.$emit('confirm');
      } catch (e) {
        console.error(e);
      }
	},
    clone: function(el) {
      return {
        name: el.name + " cloned"
      };
    },
    log: function(evt) {
      console.log(evt);
	  if(this.listout.length<=0){
      this.$emit('update:visibleHeader', true);
	  } else {
      this.$emit('update:visibleHeader', false);
	  }
    },
    resetForm () {
      if(this.$refs.form!=null){
          this.$refs.form.resetFields();
      }
    }
  }
};
</script>
<style>
.col-3 {
	width: 48%;
    float: left;
    margin-right: 1%;
    margin-left: 1%;
}

.list-group {
	min-height: 100px;
    padding: 5px;
    border: dashed 2px grey;
    margin-top: 10px;
}

.list-group-item {
	width: 31%;
    float: left;
    height: 90px;
    text-align: center;
    line-height: 90px;
    cursor: move;
    background: #409eff;
    color: white;
    font-size: 15px;
    margin: 1%;
}

.list-group-item-empty {
	width: 100%;
	height:90px;
}

.col-3 h3 {
	text-align: center;
	background: aliceblue;
    padding: 10px 10px;
}

.btn-group {
	height: 90px;
    width: 100%;
    text-align: center;
    line-height: 90px;
    font-size: 23px;
}
</style>